{extend name="layout/detail" /}
{block name="content"}
<div class="td-content-wrap p20">
    <div class="td-content-header">
        <h1 class="main-title">轮播图管理</h1>
    </div>
    <hr>
    <div class="panel no-border">
        <span class="mid"></span>
        <a class="layui-btn" onclick="add();">新增</a>
    </div>
    <table id="data_table" lay-filter="data_table"></table>
</div>
{/block}

{block name="script"}
<script type="text/html" id="tool_bar">
    <input data-id="{{d.id}}" type="checkbox" name="is_valid" value="1" lay-skin="switch" lay-text="开启|关闭" lay-filter="is_valid" {{ d.is_valid== 1 ? 'checked' : '' }} />
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    function showBigImage(e) {
        let $ = layui.jquery;
        let content = "<img src=" + $(e).attr('src') + " />";
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            resize: false,
            area: ['auto'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: content
        })
    }

    layui.use(['element', 'data_table'], function () {
        var $ = layui.jquery;//？
        var data_table = layui.data_table;
        var form = layui.form;
        var where = {};//?

        // 记录返回地址
        set_return_url(null);

        // 页面用到方法
        var fn = {
            add: function (data) {
                popup_open('{:url("add")}', 720, 640);
            },
            edit: function (data) {
                popup_open('{:url("edit")}?id=' + data.id, 720, 640);
            },
            del: function (data) {
                layer.msg('确定要删除吗?', {
                    time: 0,
                    btn: ['确定', '取消'],
                    yes: function (index) {
                        var vars = 'id=' + data.id;
                        $.get("{:url('del')}", vars, function (res) {
                            if (res.code) {
                                layer.msg(res.msg, {
                                    time: 1200
                                }, function () {
                                    location.reload(true);
                                });
                            } else {
                                layer.msg(res.msg, {time: 1200});
                            }
                        });
                    },
                    no: function (index) {
                        layer.close(index);
                    }
                });
            },
        };
        win_exp(fn);

        var cols = [[
            {
                type: 'numbers',
                title: '序号',
                align: 'center',
                width:80,
            },
            {
                field: 'title',
                title: '名称',
                align: 'center',
                minWidth:150,
            },
            {
                field: 'img',
                title: '轮播图',
                align: 'center',
                minWidth:150,
                templet: function (d) {
                    return '<img src="'+d.img+'" style="height:90%;" onclick="showBigImage(this)"/>'
                }
            },
            {
                toolbar: '#tool_bar',
                title: '操作',
                width:200,
                minWidth:200,
                align: 'center',
            }]];

        data_table.config.cols = cols;
        data_table.render();
    });
</script>
{/block}